<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>创建消息</title>
    <link rel="stylesheet" href="${rc.contextPath}/static/lib/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="${rc.contextPath}/static/plugin/layer/skin/layer.css">
    <link rel="stylesheet" href="${rc.contextPath}/static/css/dj-css.css">
    <!--<link rel="stylesheet" href="list.css">-->
    <style type="text/css">
        .x-red{
            color: red;
        }
        .guide{display: inline-block;width: 100px;height:30px;line-height: 30px;text-align: center;cursor: pointer;}
        .guide{border:1px solid #ddd;margin:0 0 20px 20px;border-radius:2px;}
        .bgColor{border:1px solid #009688;background:#009688;color:#fff;}
    </style>
</head>
<body>
<div id="createApp">
    <div>
        <fieldset class="layui-elem-field layui-field-title" >
            <legend>标题</legend>
        </fieldset>
        <!--<form >-->
            <span @click="showThisStep(0)" class="guide">第一步</span>
            <span @click="showThisStep(1)" class="guide">第二步</span>
            <span @click="showThisStep(2)" class="guide">第三步</span>
            <div  class="step" >
                <div class="layui-form-item">
                    <label class="layui-form-label" style="text-align: right;">问卷查询</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入问卷名称" class="layui-input" v-model="qsName">
                    </div>
                    <span class="layui-btn"  @click="checkQs">搜索</span>
                </div>

                <div class="layui-form-item">
                    <div class="dj-select dj-select-inline">
                        <label   style="height:auto;padding:3px 15px;width:110px;text-align: right;">所属问卷</label>
                        <div class="dj-select-content" style="width: 180px;">
                            <div class="dj-select-input" flag = 'true' style="width: 190px;">
                                <span class="dj-selected readOnly" type="text" name=""  selectedCode='' style="height:40px;line-height:40px;width: 190px;" id="qId">请选择所属问卷</span>
                                <i></i>
                            </div>
                            <ul class="dj-select-list qsList" style="width: 190px;">
                                <li v-for="qs in qsList" :code="qs.id" >{{qs.name}}</li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div >
            <div  class="step" >
                <div class="layui-form-item">
                    <div class="dj-select dj-select-inline">
                        <label  style="height:auto;padding:3px 15px;width:110px;text-align: right;">父级标题</label>
                        <div class="dj-select-content" style="width: 180px;">
                            <div class="dj-select-input" flag = 'true' style="width: 173px;">
                                <span class="dj-selected readOnly" id="level" type="text" name=""  selectedCode='' style="height:40px;line-height:40px;width: 173px;">请选择标题级别</span>
                                <i></i>
                            </div>
                            <ul class="dj-select-list" style="width: 173px;">
                                <li code = "">请选择标题级别</li>
                                <li code = '1'>1</li>
                                <li code = '2'>2</li>
                                <li code = '3'>3</li>
                                <li code = '4'>4</li>
                                <li code = '5'>5</li>
                            </ul>
                        </div>
                    </div>
                    <div class="layui-input-inline" style="float: none;">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入父级标题名称" class="layui-input" v-model="ptitleName">
                    </div>
                    <span class="layui-btn"   @click="checkPtitle">搜索</span>
                </div>

                <div class="layui-form-item">
                    <div class="dj-select dj-select-inline">
                        <label   style="height:auto;padding:3px 15px;width:110px;text-align: right;">父级标题</label>
                        <div class="dj-select-content" style="width: 180px;">
                            <div class="dj-select-input" flag = 'true' style="width: 173px;">
                                <span class="dj-selected readOnly" type="text" name=""  selectedCode='' style="height:40px;line-height:40px;width: 173px;" id="pId">请选择父级标题</span>
                                <i></i>
                            </div>
                            <ul class="dj-select-list ptitleLevelList" style="width: 173px;">

                                <li v-for="ptitle in ptitleLevelList " :code="ptitle.id" :class="{'selected':ptitle.code == qsType}">{{ptitle.titleName}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div >
            <div  class="step" >
                <div class="layui-form-item">
                    <label class="layui-form-label">标题名称</label>
                    <div class="layui-input-inline" >
                        <input type="text" name="titleName"   v-model="parameter.titleName" placeholder="请输入标题名称" autocomplete="off" class="layui-input" >
                    </div>
                    <div class="layui-form-mid layui-word-aux layui-input-inline">
                        <span class="x-red">*必填</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">标题级别</label>
                    <div class="layui-input-inline">
                        <input type="text" name="level" v-model="parameter.level"  lay-verify="required" placeholder="请输入标题级别" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux layui-input-inline">
                        <span class="x-red">*必填</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型编码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="typeCode" v-model="parameter.typeCode"  lay-verify="required" placeholder="请输入类型编码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux layui-input-inline">
                        <span class="x-red">*必填</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">标题排序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" v-model="parameter.order" lay-verify="required" placeholder="请输入标题排序" autocomplete="off" class="layui-input" >
                    </div>
                    <div class="layui-form-mid layui-word-aux layui-input-inline">
                        <span class="x-red">*必填</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否有子级</label>
                    <div class="layui-input-inline">
                        <input type="text" name="isNoChild" v-model="parameter.isNoChild" lay-verify="required" placeholder="1代表有,0代表没有" autocomplete="off" class="layui-input" >
                    </div>
                    <div class="layui-form-mid layui-word-aux layui-input-inline">
                        <span class="x-red">*必填</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label  class="layui-form-label"></label><button class="layui-btn" lay-submit="" lay-filter="demo2" @click="sub">提交</button>
                </div>
            </div>

        <!--</form>-->

    </div>
</div>
<script src="${rc.contextPath}/static/lib/jquery.min.js"></script>
<script src="${rc.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="${rc.contextPath}/static/lib/vue.min.js"></script>
<script src="${rc.contextPath}/static/lib/dj-js.js"></script>
<script type="text/javascript">


    var myid="${title.id}"
    if(myid==""){
        var kid=""
    }else {
        kid="$!{title.id}"
    }
    var VM = new Vue({
        el:"#createApp",
        created:function(){
            $(".step").css({"display":"none"}).eq(0).css({"display":"block"});
            $(".guide").removeClass('bgColor').eq(0).addClass('bgColor');
        },
        data:{
            messagesLists:[],
            parameter:{
                id:kid,
                titleName:'$!{title.titleName}',
                level:'$!{title.level}',
                createTime:'$!{title.createTime}',
                updateTime:'$!{title.updateTime}',
                updateUser:"$!{title.updateUser}",
                createUser:"$!{title.createUser}",
                parentId:"$!{title.parentId}",
                typeCode:"$!{title.typeCode}",
                isNoChild:"$!{title.isNoChild}",
                order:"$!{title.order}",
                questionId:"$!{title.questionId}",
            },
            ptitleLevel:'',
            ptitleLevelList:[],
            ptitleName:'',
            qsName:'',
            qsList:[],
            qsType:''
        },
        methods: {
            sub: function () {
                var _this = this;
//                this.parameter.level = $("#level").attr("selectedCode");
                this.parameter.questionId=$("#qId").attr("selectedCode");
                this.parameter.parentId=$("#pId").attr("selectedCode");
                if(this.parameter.titleName == "" ){
                    layer.msg("请输入标题名称！", {icon: 5});
                    return false;
                }else if(this.parameter.level == ""){
                    layer.msg("请输入标题级别！", {icon: 5});
                    return false;
                }else if(this.parameter.typeCode == ""){
                    layer.msg("请输入标题类型！", {icon: 5});
                    return false;
                }else if(this.parameter.order == ""){
                    layer.msg("请输入标题排序！", {icon: 5});
                    return false;
                }else if(this.parameter.isNoChild == ""){
                    layer.msg("请输入是否有子级！", {icon: 5});
                    return false;
                }

                if(this.parameter.level != ""){
                    if(!reg1.test(this.parameter.level)){
                        console.log(this.parameter.level)
                        layer.msg("标题级别必须为数字", {icon: 5});
                        return false;
                    }

                }
                if(this.parameter.isNoChild != ""){
                    if(!reg1.test(this.parameter.isNoChild)){
                        console.log(this.parameter.isNoChild)
                        layer.msg("是否有子级必须为数字", {icon: 5});
                        return false;
                    }

                }
                if(this.parameter.typeCode != ""){
                    if((/\W/g).test(this.parameter.typeCode)){
                        layer.msg("标题编码不能为汉字", {icon: 5});
                        return false;
                    }

                }
                if(this.parameter.order != ""){
                    if(!reg1.test(this.parameter.order)){
                        layer.msg("标题排序必须为数字", {icon: 5});
                        return false;
                    }

                }
                $.ajax({
                    type: "post",
                    url: '${rc.contextPath}/QsTitle/saveOrUpdate.do',
                    data: _this.parameter,
                    dataType: "json",
                    success: function (data) {
                        //关闭窗口
                        //layer.msg("操作成功", {icon: 0});
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                        parent.window.location.reload();
                        window.location.href = "javascript:location.replace(location.href)";
                    }
                })
            },
            checkPtitle:function(){
                var _this = this;
                _this.ptitleLevel = $("#ptitleLevel").val();
                $.ajax({
                    type: "post",
                    url: '${rc.contextPath}/QsTitle/getTitleListBySearch.do',
                    data:{"titleName":_this.ptitleName,"level":_this.ptitleLevel},
                    dataType: "json",
                    success: function (res) {
                        if(res.code == 200){
                            _this.ptitleLevelList = res.result.titleList;
                            $('.ptitleLevelList').css({"display":"block"}).prev().attr("flag","false");
                        }
                        console.log(res);
                    }
                })
            },
            checkQs:function(){
                var _this = this;
                _this.ptitleLevel = $("#ptitleLevel").val();
                $.ajax({
                    type: "post",
                    url: '${rc.contextPath}/QsTitle/getQuestionList.do',
                    data:{"name":_this.qsName},
                    dataType: "json",
                    success: function (res) {
                        if(res.code == 200){
                            _this.qsList = res.result.questionList;
                            $('.qsList').css({"display":"block"}).prev().attr("flag","false");
                            console.log(res);
                        }
                    }
                })
            },
            showThisStep:function(index){
                var a = $("#qId").attr("selectedCode");
                var b = $("#pId").attr("selectedCode");
                console.log(a);
                console.log(b);
                if(index == 1 && a == ""){
                    alert("请给该标题分配问卷");
                    return false;
                }else if(index == 2 && a == ""){
                    alert("请给该标题分配问卷");
                    return false;
                }else if(index == 2 && b == ""){
                    alert("请进入第二步给该标题添加父级标题");
                    return false;
                }
                $(".guide").removeClass("bgColor").eq(index).addClass("bgColor");
                $(".step").css({"display":"none"}).eq(index).css({"display":"block"});

            }
        }
    });//vue 实例结束
    layui.use(['layer',"form",'laydate'], function(){
        var form = layui.form(),
                layer = layui.layer,
                laydate = layui.laydate;
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input.checkbox');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
    });
    var reg1=/[0-9]*/;
    var reg2=/^[\u4e00-\u9fa5],{0,}$/;
    var reg3=/[\u4e00-\u9fa5]+/;
</script>
</body>
</html>